<template>
	<view class="content">
		<!-- <view class="serch">
			<u--input placeholder="请输入科室关键字搜索" shape="circle" border="surround" clearable v-model="keyword"></u--input>
		</view> -->
		<!-- <view class="depart-con">
			<view class="depart-list" v-for="(item,index) in filteredPeople" :key="index" @click="goPage(item)">
				{{item.deptName}}
			</view>
		</view> -->
		<!-- <view class="mine-list">
			<view class="list-item" v-for="(item,index) in filteredPeople" :key="index" @click="goPage(item)">
				<view class="">{{item.deptName}}</view>
				<image :src="$IMG_URL+'jump.png'" class="list-right-img"></image>
			</view>
		</view> -->
		<view class="category-left">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="left-item" :class="tabIndex===index?'leftActive':''" v-for="(item,index) in dataList"
					:key="index" @click="changeTab(index)">
					{{item.fartherDepName}}
					<text v-if="tabIndex===index" class="left-line"></text>
				</view>
			</scroll-view>
		</view>
		<view class="category-right">
			<scroll-view scroll-y="true" style="height: 100vh;" v-if="dataList[tabIndex]">
				<view v-for="(item,index) in dataList[tabIndex].hisDepartments" :key="index" class="right-list">
					<view class="list-item" @click="goPage(item)">
						<view class="">{{item.deptName}}</view>
						<image :src="$IMG_URL+'jump.png'" class="list-right-img"></image>
					</view>
					<u-line color="#E7E7E7"></u-line>
				</view>
			</scroll-view>
		</view>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
	import {
		departmentApi
	} from "@/api/user"
	export default {
		data() {
			return {
				keyword: '',
				loading: true,
				time: '',
				dataList: [],
				tabIndex: 0,
			}
		},
		onLoad(option) {
			this.time = option.time
			this.getList()
		},
		computed: {
			filteredPeople() {
				if (this.keyword === '') {
					return this.dataList;
				} else {
					return this.dataList.filter(person => person.fartherDepName.includes(this.keyword)); // 根据输入内容过滤人员
				}
			},
			doctorList() {
				return this.dataList[this.tabIndex]
			}

		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			async getList() {

				try {
					const res = await departmentApi({
						date: this.time
					})
					this.dataList = res.data
					// this.$nextTick(() => {
					// 	this.$refs.collapse.init()
					// })
					this.loading = false
				} catch (e) {
					this.loading = false
				}

			},
			goPage(item) {
				uni.navigateTo({
					url: `/pages/bookdoctor/bookdoctor?time=${this.time}&deptNo=${item.deptNo}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: #FFFFFF;
		color: #666666;
		font-size: 27rpx;
		/* padding-top: 143rpx; */
		padding-bottom: calc(env(safe-area-inset-bottom)/2);
		box-sizing: border-box;
		display: flex;
	}

	.category-left {
		height: 100vh;
		padding-bottom: calc(env(safe-area-inset-bottom)/2);
		box-sizing: border-box;
		width: 240rpx;
		background: #F9F9F9;

		.left-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 30rpx;
			color: #6D6D6D;
			position: relative;
		}

		.leftActive {
			// font-weight: bold;
			// font-size: 34rpx;
			color: #05A2FF;
			background: #FFFFFF;
		}

		.left-line {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 52rpx;
			background: #05A2FF;
			/* border-radius: 5rpx; */

		}

	}



	.category-right {
		height: 100vh;
		padding-bottom: calc(env(safe-area-inset-bottom)/2);
		box-sizing: border-box;
		flex: 1;

		.right-list {
			background: #FFFFFF;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
		}

		.right-title {
			padding: 23rpx 0;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		.item-con {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.type-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: bold;
			font-size: 25rpx;
			color: #6A6A6A;
			margin-top: 31rpx;
			margin-right: 66.5rpx;
		}
	}

	.serch {
		position: fixed;
		top: 0;
		width: 100vw;
		background-color: #FFFFFF;
		height: 120rpx;
		padding: 0 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.depart-con {
		margin-left: 31rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.depart-list {
		width: 215rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		margin-bottom: 23rpx;
		margin-right: 21rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

	}

	.mine-list {
		background-color: #FFFFFF;
		padding: 0 31rpx;
	}

	.list-item {
		padding: 23rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		/* border-bottom: 1px solid #E7E7E7; */
	}

	.coll-list .list-item:last-child {
		border: none;
	}

	.list-right-img {
		width: 31rpx;
		height: 31rpx;
		margin-left: auto;

	}
</style>